<template>
  <div style="margin-bottom: 20px">
    <el-button type="primary" plain @click="handleDialog"> 添加分类 </el-button>
  </div>
  <el-table
    v-loading="tableLoading"
    :data="tableData"
    style="width: 100%; margin-bottom: 20px"
    row-key="_id"
    default-expand-all
    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
  >
    <el-table-column prop="type_name" label="名称">
      <template #default="{ row }">
        <el-tag type="success">
          {{ row.type_name }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="type_status" label="状态">
      <template #default="{ row }">
        <el-switch
          :value="row.type_status === 1"
          active-color="#13ce66"
          inactive-color="#ff4949"
        >
        </el-switch>
      </template>
    </el-table-column>
    <el-table-column prop="type_mid" label="类型"> </el-table-column>
    <el-table-column prop="type_sort" label="排序"> </el-table-column>
    <el-table-column label="操作">
      <template #default="{ row }">
        <el-button type="text" @click="handleEdit(row)">编辑</el-button>
        <el-button type="text" @click="handleDel(row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 增加分类 -->
  <el-dialog v-model="dialogVisible" title="增加分类" width="60%">
    <el-form
      ref="diaForm"
      :model="diaFormData"
      :rules="diaFormRules"
      label-width="110px"
      style="width: 460px"
    >
      <el-form-item prop="typeMid" label="类型：">
        <el-select v-model="diaFormData.typeMid" placeholder="请选择">
          <el-option label="视频" value="视频" />
        </el-select>
      </el-form-item>
      <el-form-item prop="typePid" label="父级类型：">
        <el-select v-model="diaFormData.typePid" placeholder="请选择">
          <el-option
            v-for="item in typePidArr"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="typeStatus" label="状态：">
        <el-radio-group v-model="diaFormData.typeStatus">
          <el-radio :label="1">启用</el-radio>
          <el-radio :label="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="typeSort" label="排序：">
        <el-input v-model="diaFormData.typeSort" />
      </el-form-item>
      <el-form-item prop="typeName" label="名称：">
        <el-input v-model="diaFormData.typeName" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          :loading="diaBtnLoding"
          @click="handleCreatType"
        >
          确 定
        </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 编辑分类 -->
  <el-dialog v-model="editDialogVisible" title="编辑分类" width="60%">
    <el-form
      ref="editDiaForm"
      :model="editDiaFormData"
      :rules="editFiaFormRules"
      label-width="110px"
      style="width: 460px"
    >
      <el-form-item prop="type_mid" label="类型：">
        <el-select v-model="editDiaFormData.type_mid" placeholder="请选择">
          <el-option label="视频" value="视频" />
        </el-select>
      </el-form-item>
      <el-form-item prop="type_pid" label="父级类型：">
        <el-select
          v-model="editDiaFormData.type_pid"
          :disabled="editDiaFormData.type_pid === '0'"
          placeholder="请选择"
        >
          <el-option
            v-for="item in typePidArr"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="type_status" label="状态：">
        <el-radio-group v-model="editDiaFormData.type_status">
          <el-radio :label="1">启用</el-radio>
          <el-radio :label="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="type_sort" label="排序：">
        <el-input v-model="editDiaFormData.type_sort" />
      </el-form-item>
      <el-form-item prop="type_name" label="名称：">
        <el-input v-model="editDiaFormData.type_name" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          :loading="editBtnLoaing"
          @click="handleEditType"
        >
          确 定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { reactive, toRefs, computed, onMounted, getCurrentInstance } from 'vue'
import { vodType, vodTypeCreat, vodTypeUpdate, vodTypeDelete } from '@i/vod'
export default {
  setup() {
    const ctx = getCurrentInstance().ctx
    const confirm = () =>
      ctx.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })

    // 表格
    let table = reactive({
      tableLoading: false,
      tableData: [],
      async vodType() {
        try {
          this.tableLoading = true
          this.tableData = await vodType()
          this.tableLoading = false
        } catch (error) {
          this.tableLoading = false
          throw error
        }
      },
      async handleDel(val) {
        try {
          await confirm()
          table.tableLoading = true
          await vodTypeDelete({
            id: val._id
          })
          ctx.$message({
            message: '删除成功',
            type: 'success'
          })
          table.vodType()
        } catch (error) {
          if (error === 'cancel') return
          ctx.$message({
            message: '删除失败',
            type: 'error'
          })
        }
      }
    })

    // 增加分类
    let addTypeDialog = reactive({
      dialogVisible: false,
      diaBtnLoding: false,
      diaFormRules: {
        typeMid: { required: true, message: '请输入视频类型' },
        typePid: { required: true, message: '请输入父级类型' },
        typeStatus: {
          required: true,
          message: '请选择启用状态'
        },
        typeSort: {
          required: true,
          message: '请输入排序大小'
        },
        typeName: { required: true, message: '请输入类型名称' }
      },
      diaFormData: {
        typeMid: [],
        typePid: [],
        typeStatus: 1,
        typeSort: 0,
        typeName: ''
      },
      handleDialog() {
        addTypeDialog.dialogVisible = true
        // 移除表单校验
        ctx.$nextTick(() => {
          ctx.$refs.diaForm.clearValidate()
          ctx.$refs.diaForm.resetFields()
        })
      },
      async handleCreatType() {
        await ctx.$refs.diaForm.validate()
        try {
          addTypeDialog.diaBtnLoding = true
          await vodTypeCreat(creatTypeData.value)
          ctx.$message({
            message: '增加成功',
            type: 'success'
          })
          addTypeDialog.diaBtnLoding = false
          addTypeDialog.dialogVisible = false
          table.vodType()
        } catch (error) {
          ctx.$message({
            message: '增加失败',
            type: 'error'
          })
          addTypeDialog.diaBtnLoding = false
          throw error
        }
      }
    })

    // 编辑分类
    const editTypeDialog = reactive({
      editDialogVisible: false,
      editBtnLoaing: false,
      editDiaFormData: {},
      editFiaFormRules: {
        type_mid: { required: true, message: '请输入视频类型' },
        type_pid: { required: true, message: '请输入父级类型' },
        type_status: {
          required: true,
          message: '请选择启用状态'
        },
        type_sort: {
          required: true,
          message: '请输入排序大小'
        },
        type_name: { required: true, message: '请输入类型名称' }
      },
      handleEdit(val) {
        editTypeDialog.editDiaFormData = { ...val }
        editTypeDialog.editDialogVisible = true
      },
      async handleEditType() {
        await ctx.$refs.editDiaForm.validate()
        try {
          editTypeDialog.editBtnLoaing = true
          await vodTypeUpdate(editTypeData.value)
          ctx.$message({
            message: '更新成功',
            type: 'success'
          })
          editTypeDialog.editBtnLoaing = false
          editTypeDialog.editDialogVisible = false
          table.vodType()
        } catch (error) {
          ctx.$message({
            message: '更新失败',
            type: 'error'
          })
          editTypeDialog.editBtnLoaing = false
          throw error
        }
      }
    })

    // 父级类型下拉数据
    const typePidArr = computed(() => {
      let data = table.tableData.map(item => {
        return {
          label: item.type_name,
          value: item.type_id
        }
      })
      data.unshift({
        label: '顶级分类',
        value: '0'
      })
      return data
    })

    // 增加分类数据
    const creatTypeData = computed(() => {
      return {
        typeName: addTypeDialog.diaFormData.typeName,
        typePid: addTypeDialog.diaFormData.typePid[0],
        typeMid: addTypeDialog.diaFormData.typeMid,
        typeSort: addTypeDialog.diaFormData.typeSort,
        typeStatus: addTypeDialog.diaFormData.typeStatus
      }
    })

    // 编辑分类数据
    const editTypeData = computed(() => {
      return {
        id: editTypeDialog.editDiaFormData._id,
        typeName: editTypeDialog.editDiaFormData.type_name,
        typePid: editTypeDialog.editDiaFormData.type_pid[0],
        typeMid: editTypeDialog.editDiaFormData.type_mid,
        typeSort: editTypeDialog.editDiaFormData.type_sort,
        typeStatus: editTypeDialog.editDiaFormData.type_status
      }
    })

    onMounted(() => {
      table.vodType()
    })

    return {
      typePidArr,
      ...toRefs(table),
      ...toRefs(addTypeDialog),
      ...toRefs(editTypeDialog)
    }
  }
}
</script>

<style lang="scss" scoped></style>
